<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />

    <meta name="author" content="http://www.huayingsoft.com/" />
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=8,IE=9,IE=10" />
    <meta http-equiv="Expires" content="0">
    <meta http-equiv="Cache-Control" content="no-cache">
    <meta http-equiv="Cache-Control" content="no-store">

    <link rel="stylesheet" href="../../css/bootstrap.min.css">
    <link rel="stylesheet" href="../../css/grid/bootstrap-table.css">
    <link rel="stylesheet" href="../../css/bootstrapEx.css">

    <script src="../../js/jquery-1.9.1.min.js"></script>
    <script type="text/javascript" src="../../js/from/global.js"></script>
    <script type="text/javascript" src="../../js/from/jquery.smart-form.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.js"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-datetimepicker.zh-CN.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/from/bootstrap-select.js" charset="UTF-8"></script>
    <script type="text/javascript" src="../../js/grid/bootstrap-table.js"></script>
    <script type="text/javascript" src="../../js/bootstrap.min.js"></script>
    <script type="text/javascript" src="../../js/bootstrapEx2.0.js"></script>
    <style>
        .fleft{
            position: relative;
            float: left;
            width: 800px;
        }
        .fleft .row{
            margin-bottom:0px !important
        }
    </style>
</head>
<body>
    <form action="" id="itemForm1"></form>
    <table id="Grid1"></table>
</body>
<script>
    $(document).ready(function () {
        var griddata = [];
        $.ajax({
            url: "data.json",//json文件位置
            type: "GET",//请求方式为get
            dataType: "json", //返回数据格式为json
            async: false,
            success: function (data) {//请求成功完成后要执行的方法 
                griddata = data;
            }
        })
        var Grid1 = new bsEx.Grid({
            id:"Grid1",
            renderto:"#Grid1",
            dataID:"id",
            data:griddata,
            showRefresh:true,
            search:true,showColumns:true,
            tools:[
                {id:"btn_1",text:"得到选择项",icon:"print"},
                {id:"btn_4",text:"得到选择的ID",icon:"th-list"},
                {id:"btn_2",text:"选中第二行",icon:"pencil"},
                {id:"btn_3",text:"跳到下一页",icon:"minus"}
            ],
            columns:{checkbox:true,Number:"序号",id:"id","code":"编号","mName":"名称","crName":"位置"}
        })
        InitForm1();
        $('#btn_2').on("click",function(){
            Grid1.check(1);
        });
        $('#btn_3').on("click",function(){
            Grid1.nextPage();
        });
        
    });

    
    //绘制表单
    function InitForm1() {
        //清空
        //$('#itemForm1').html('');
        form1 = new bsEx.ItemForm(bsEx.ui.Grid1.toolbar);
        form1.items = [
            { type: 'text', name: 'taskCode', title: '单号' },
        ];//项
        form1.cls = "fleft"
        form1.colunb = 2;//列数
        form1.init();//开始显示
    }
        
    function btn_1_onclick(){
        var getSelections = bsEx.ui.Grid1.getselect();//等于bootstrapTable("getSelections");
        bsEx.Alert("提示",JSON.stringify(getSelections));
    }
    function btn_4_onclick(){
        var getSelections = bsEx.ui.Grid1.getselectids();
        bsEx.Alert("提示",JSON.stringify(getSelections),4);
    }
</script>
</html>